<template>
	<view class="container-box">
		<!-- 	<view class="head-tabs">
			<view class="tabs-item" v-for='item in tabList' :key='item.name' @click="tabClick">{{item.name}}</view>
		</view> -->
		<!-- <u-tabs :list="tabList"></u-tabs> -->
		<view class="ht-list" id='headerTabs' v-if='topicList && topicList.length>0'>
			<view class="ht-item" v-for="item in topicList" :key="item.id" @click="hotCommunityMethod(item)">
				<view class="ht-img"><img :src="item.imageUrl ? item.imageUrl : baseUrl + '/static/error.png'" alt="" />
				</view>
				<view class="ht-title">{{ item.topicName }}</view>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{height:'calc( 100vh - '+surplusHeight+'px - '+headerTabs+'px)'}"
			class="scroll-Y" @scrolltolower="scrolltolower">
			<view class="content-box">
				<view class="item-box" v-for="item in articleList" :key="item.id" @click="hairCommunityClick(item)">
					<img :src="item.image ? item.image : baseUrl + '/static/error.png'" alt="" />
					<view class="right-box">
						<view class="tilte-top">{{ item.title }} </view>
						<view>
							<text style="color: coral; font-size: 24rpx">{{
								item.topicName?item.topicName:''
							  }}</text>
						</view>
						<!-- <view class="tilte-center">{{ item.introduction }}</view> -->
						<view class="title-bottom">
							<view style="display: flex; font-size: 20rpx; margin-right: 20rpx;align-items: center;">
								<u-icon name="chat"></u-icon><text>{{ item.commentQuantity }}</text>
							</view>
							<view v-if="item.isFavorite == 'Y'"
								style="display: flex; font-size: 20rpx;align-items: center;align-items: center; margin-right: 20rpx;">
								<u-icon color="#e45656" name="star-fill"></u-icon><text
									style="color:#e45656 ;">{{ item.favoriteQuantity }}</text>
							</view>
							<view v-else
								style="display: flex; font-size: 20rpx; margin-right: 20rpx;align-items: center;">
								<u-icon name="star"></u-icon><text>{{ item.favoriteQuantity }}</text>
							</view>
							<view v-if="item.isLike == 'Y'"
								style="display: flex; font-size: 20rpx;align-items: center;margin-right: 20rpx;">
								<u-icon color="#e45656" name="heart-fill"></u-icon><text
									style="color:#e45656 ;">{{ item.likeQuantity }}</text>
							</view>

							<view v-else
								style="display: flex; font-size: 20rpx;align-items: center;margin-right: 20rpx;">
								<u-icon name="heart"></u-icon><text>{{ item.likeQuantity }}</text>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore v-if="status!=='nomore'" :status="status" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		myFollow,
		recommend
	} from "@/api/axios/HairCommunity.js";
	export default {
		props: {
			surplusHeight: {
				require: true,
				type: String,
			},
			openId: {
				require: true,
				type: String,
			},
			tabList: {
				require: true,
				type: Array,
			},
		},
		data() {
			return {
				topicList: [],
				articleList: [],
				baseUrl: this.staticURL,
				pageNo: 1,
				pageSize: 20,
				status: "loadmore", //loadmore/loading / nomore
				menuHeight: '',
				headerTabs: 0
			};
		},
		methods: {
			scrolltolower() {
				let _this = this;
				if (this.status !== "nomore" && this.status !== "loading") {
					this.status = "loading";
					recommend({
						params: {
							openId: this.openId,
							pageNo: this.pageNo,
							pageSize: this.pageSize,
						},
					}).then((res) => {
						_this.articleList = _this.articleList.concat(res.records);
						if (res.records.length < _this.pageSize) {
							_this.status = "nomore";
						} else {
							_this.pageNo = _this.pageNo + 1;
							_this.status = "loadmore";
						}
					});
				}
			},
			tabClick() {},
			hairCommunityClick(data) {
				uni.navigateTo({
					url: "/pages/HairCommunityDetail/index?id=" +
						data.id +
						"&isLike=" +
						data.isLike +
						"&isFavorite=" +
						data.isFavorite,
				});
			},
			hotCommunityMethod(data) {
				console.log(data);
				uni.navigateTo({
					url: "/pages/HotTopicList/index?topicId=" + data.id,
				});
			},
		},

		watch: {
			openId: {
				handler(newData) {
					let _this = this;
					if (this.openId) {
						myFollow({
							params: {
								openId: this.openId,
							},
						}).then((res) => {
							_this.topicList = res;
						});
						this.status = "loading";
						recommend({
							params: {
								openId: this.openId,
								pageNo: this.pageNo,
								pageSize: this.pageSize,
							},
						}).then((res) => {
							const query = uni.createSelectorQuery().in(this);
							query
								.select("#headerTabs")
								.boundingClientRect((data) => {
									console.log(data);
									this.headerTabs = data.height
								})
								.exec();

							_this.articleList = _this.articleList.concat(res.records);
							if (res.records.length < _this.pageSize) {
								_this.status = "nomore";
							} else {
								_this.pageNo = _this.pageNo + 1;
								_this.status = "loadmore";
							}
						});
					}
				},
				immediate: true,
			},
		},

		mounted() {


			let res = uni.getSystemInfoSync();
			let menu = wx.getMenuButtonBoundingClientRect();
			let systemBarHeight =
				(menu.top - res.statusBarHeight) * 2 + menu.height + res.statusBarHeight;
			if (res.model.indexOf("iPhone") > -1) {
				systemBarHeight += 4;
			}

			this.menuHeight = res.statusBarHeight + 220 + 60

		},
	};
</script>

<style lang="scss">
	@import "./index.scss";
</style>